<template>
    <view class="xjcourselist">
        <u-cell v-if="livelist.length == 0 && columnlist.length == 0">
            <view slot="title">{{ category.name ? category.name : '待定名' }}</view>
			<view slot="right-icon">查看更多<i class="iconfont icon-arrow-right"></i></view>            
        </u-cell>
        <view v-if="courselist.length == 0 ? false : true">
            <!-- 
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item.description"
                    :title="item.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item, index) in courselist"
                    :key="index"
                    @click="clickLive(item.id)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item.price == 0 ? '免费' : '￥' + item.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item1, index1) in item.tag" :key="index1">{{
                            item1
                        }}</van-tag>
                    </template>
                    <template #num>
                        <span>{{ item.view }}次观看</span>
                    </template>
                </van-card>
            </van-pull-refresh> -->
        </view>
       
    </view>
</template>

<script>
import xjsearch from '@/components/shop/xjsearch.vue';
export default {
    props: ['category', 'prevent'],
    components: {
        xjsearch,
    },
    data() {
        return {
            courselist:[],
            cellname: '待定名', //直播分类名
            id: '', //发送子分类id获取cardlist
            columnlist: [], //视频数据列表
            livelist: [],
            page: 1, //第1页数据
            refreshing: false
        };
    },
    methods: {
        onRefresh() {
            this.page = 1;
            this.getLiveLIst(this.id);
            this.$toast.success('刷新成功');
        },
        onRefresh2() {
            this.page = 1;
            this.getColumnList(this.id);
            this.$toast.success('刷新成功');
        },
        async getColumnList(id) {
            //获得专栏列表
            let query = {
                id,
                status: 1,
                page: this.page,
                rows: 4
            };
            //let res = await this.$frontaxios.post(this.$front.getcolumnListData,query);
            let res = await this.$frontaxios.post(this.$front.getKnowledgeList3, query);
            console.log(11111)
            console.log(res,22222);
            if (res.code == 1) {
                this.courselist = res.data.list.slice(0, 5);
                for (let i = 0; i < this.courselist.length; i++) {
                    if (this.courselist[i].tag) {
                        this.courselist[i].tag = this.courselist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        // async getLiveList(id) {
        //     //获得直播列表
        //     let query = {
        //         id,
        //         status: 1,
        //         page: this.page,
        //         rows: 4
        //     };
        //     let res = await this.$frontaxios.post(this.$front.getLiveList, query);
        //     if (res.code == 1) {
        //         this.livelist = res.data.livecoursedata.slice(0, 5);
        //         for (let i = 0; i < this.livelist.length; i++) {
        //             if (this.livelist[i].tag) {
        //                 this.livelist[i].tag = this.livelist[i].tag.split(',');
        //             }
        //         }
        //     } else {
        //         console.log('获取直播数据列表失败');
        //     }
        // },
        clickLive(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({
                name: 'livecontent',
                query: {
                    id
                }
            });
        },
        clickColumn(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({
                name: 'product',
                query: {
                    id
                }
            });
        },
        clickMoreLiveList(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({ name: 'morelivelist', query: { id: this.category.id } });
        },
        clickMoreColumnList(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({ name: 'morecolumnlist', query: { id: this.category.id } });
        }
    },
    created() {
        // this.getLiveList(this.category.id); //得到直播列表数据
        this.getColumnList(this.category.id); //的到专栏列表数据
    },
    watch: {
        'category.id': function (newVal, oldVal) {
            this.id = newVal;
            this.getLiveList(this.id);
            this.getColumnList(this.id);
        }
    }
};
</script>

<style lang="scss" scoped>
.xjcourselist {
    .van-card__content {
        margin-left: 20px;
    }

    .u-cell {
        align-items: center;
        border: 1px solid #eee;
        height: 40px;
    }
}

.child-item {
    margin-top: 10px;
    text-align: center;

    .vancol {
        margin-bottom: 8px;

        .defaulttagcolor {
            color: #87929b;
        }

        .selecttagcolor {
            color: #168dfa;
        }
    }
}
.van-card__tag {
    left: -18px;
    top: 14px;
    width: 84px;
    background-color: red;
    transform: rotate(-45deg);
    text-align: center;
}
.van-card__thumb {
    overflow: hidden;
}
</style>
